<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>短信验证</title>
  <script>
      (function () {
          var setFont=function () {
              var calc_window_width=window.innerWidth>750?750:window.innerWidth;
              document.documentElement.style.fontSize=calc_window_width/7.5+'px';
          }
          setFont();
          window.onresize=function () {
              setFont();
          }
      })()
  </script>
  <link rel="stylesheet" href="css/icon.css">
  <link rel="stylesheet" href="css/weui.css">
  <link rel="stylesheet" href="css/jquery-weui.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- 顶部部分 -->
  <div class="weui-header bg_blue"> 
    <div class="weui-header-left">
      <a class="icon icon-109 f-white"></a>  
    </div>
    <h1 class="weui-header-title">短信验证</h1>
  </div>
  <div class="bg-f5 space20"></div>
  <div class="register-box">
    <div class="register-alert">输入短信验证码</div>
    <p>我们已给手机号码<span class="telNum">+86 <span></span></span>发送了一个6位数验证码</p>
  </div>
  <!-- 密码框 -->
  <div class="pawBox">
    <ul class="clearfix">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="resend">重新发送（<span>59</span>）</div>
  <!-- 模拟键盘 -->
  <ul class="keyboard clearfix">
    <li class="num">1</li>
    <li class="num">2</li>
    <li class="num">3</li>
    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="num">7</li>
    <li class="num">8</li>
    <li class="num">9</li>
    <li ></li>
    <li class="num" >0</li>
    <li class="delete" ><img class="delete" src="image/delete.png" alt=""></li>
  </ul>




  <script src="script/jquery-2.2.4.js"></script>
  <script src="script/jquery-weui.js"></script>
  <script src="script/js.js?1"></script>
  <script>
    var phone=GetQueryString('phone');
    $('.telNum span').html(phone);

    //重新发送
    var resendTime=60;
    setInterval(function(){
      $('.resend span').html(resendTime);
      resendTime--;
      if(resendTime==0){
        resendTime=90;
      }
    },1000)


    //键盘输入
    var code='';
    var n=6;
    var pwd=$('.pawBox li');
    $('.keyboard').on('click','li',function(){
      if($(this).hasClass('num')&&code.length<n){
        code+=$(this).html()
      }else if($(this).hasClass('delete')&&code.length>0){
        code=code.slice(0,code.length-1);
      }
      for(var i=0;i<n;i++){
        if(code[i]){
          pwd.eq(i).html('•');
        }else{
          pwd.eq(i).html('');
        }
      }
      if(code.length==6){
        $.ajax({
          url:ajaxUrl+'/api/Smsapi/mobileValidate',
          data:{
            mobile:phone,
            moban:1,
            code:code
          },
          type:'post',
          dataType:'json',
          success:function(data){
            if(data.code==200){
              window.location='setPwd.html?mobile='+phone+'&id='+GetQueryString('id')
            }else{
              $.alert(data.msg);
            }
          },
          error:function(err){
            $.alert(err.msg);
          }
        })
      }
    }) 
  </script>
</body>
</html>
